<template>
  <ul class="collapse" :class="{active:className}">
    <li v-for="(item,index) in data" :key="index">
      <div class="collapseName">
        <div @click="changeItem(index)">
          <van-icon :name="item.isOpen?'arrow-down':'arrow-up'" />
          <span style="margin-left: 20rpx">{{item.simplename}}</span>
        </div>
        <p>
          <van-icon name="more-o" size="20" @click="getMore(item,index)"/>
         <!-- <van-action-sheet
         :show="item.isShow"
         :actions="actions"
         :description="description"
           @select="onSelect"
         @close="onClose(index)"
          /> -->
          </p>
      </div>
      <template v-if="item.children">
        <collapseBox2 :data="item.children" :className="item.isOpen"></collapseBox2>
      </template>


    </li>
     <modelBox ref="modelBox"></modelBox>
  </ul>
</template>

<script>
  import collapseBox2 from "./collapseBox2"
   import modelBox from './modelBox'
  export default {
    name: 'collapseBox',
    props: ['data','className'],
    data () {
      return {
        iconName: 'arrow-up',
        dataList:[],
        description:"",
        isOpen:"",
       actions:[
          { name: '编辑', color: '#07c160' },
               { name: '添加', color: '#1989fa' },
               { name: '删除', color: '#ee0a24' },
               { name: '详情', color: '#1989fa' },
       ],
      }
    },
    watch:{
      className:{
        handler(a,b){
         // console.log(a)
        }
      }
    },
    onLoad(){
      this.dataList=this.data;
    },
    onShow(){
          // console.log(this.className)
    },
    components:{
      collapseBox2,
      modelBox
    },
    methods: {
      init(isOpen){
        this.isOpen=isOpen;
      },
      onSelect(val){
       if(val.target.name=='详情'){
         wx.navigateTo({ url: '/pages/createProductDetail/main' })
       }
      },
      onClose(index){
         this.data[index].isShow=false;
      },
    getMore(item,index){
      wx.showActionSheet({
        itemList: ['添加', '编辑', '删除','详情'],
        success (res) {
       //   console.log(res.tapIndex)
          if(res.tapIndex==0){
             that.$refs.modelBox.init(item.id)
          }else if(res.tapIndex==1){

          }else if(res.tapIndex==2){

          }else if(res.tapIndex==3){

          }


        },
        fail (res) {
       //   console.log(res.errMsg)
        }
      })
      // this.description="所选类型"+item.name
      // this.data[index].isShow=true;
      // this.show=true;
    },
      changeItem (index) {
        if (this.dataList[index].isOpen) {

          this.data[index].isOpen=false;
          // this.$set(this.dataList,this.dataList[index].isOpen,false)
        } else  {

          this.data[index].isOpen=true;
          // this.$set(this.dataList,this.dataList[index].isOpen,true)
        }

        //console.log(this.data[index].isOpen)
      }
    }
  }
</script>

<style scoped>
  .collapse{
    width: 100%;
     height: 0;
    background: #fff;
    font-size:32rpx;
    list-style-type: none;
    transition: all 0.2s;
    overflow: hidden;
  }
  .collapse.active{
   height: auto;
    transition: all 0.2s;

  }

  .collapse>li{
    width: 100%;
         padding:25rpx 0 0 50rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;

  }
  .collapse>li:last-child{
    border-bottom:none

  }
 .collapseName>p{
   width:70%;
   display: flex;
   justify-content: flex-end;
   box-sizing: border-box;
   padding-right: 5%;
 }
  .collapseName>div{
    width: 30%;
  }
  .collapseName{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>
